<template>
	<el-card>
		<div slot="header">
			<span class="fs_large bold">项目资料</span>
		</div>
		<XhForm
			:configs="formConfigs"
			ref="form"
			size="medium"
			@value-change="onChange"
			v-loading="loading"
		></XhForm>
		<slot name="footer"></slot>
	</el-card>
</template>

<script>
import XhForm from '@/components/createCom/XhForm.vue'
import { licenseOcr } from '@/api'
import { queryGfbField, saveGfbForm } from '../api/order'

export default {
	props: {
		// visible: Boolean,
		// 订单.[订单Id]
		businessId: Number
		// 订单.[企业名称]
		// name: String
	},
	watch: {
		businessId(val) {
			this.fetchFormConfigs(val)
		}
	},
	data() {
		return {
			formConfigs: [],
			loading: false
		}
	},
	computed: {},
	mounted() {
		this.fetchFormConfigs(this.businessId)
	},
	methods: {
		onChange(data) {
			if (data.item.key == 'tbLicense') {
				licenseOcr(data.value[0]).then((res) => {
					const customerNameKey = this.formConfigs[1].fields[0].fieldName
					const certNumKey = this.formConfigs[1].fields[1].fieldName
					this.$refs.form.setFieldValue(customerNameKey, res.data.customerName)
					this.$refs.form.setFieldValue(certNumKey, res.data.certNum)
				})
			}
			if (data.item.key == 'bbLicense') {
				licenseOcr(data.value[0]).then((res) => {
					this.bbInfo = {
						bbCustomerName: res.data.customerName,
						bbCertNum: res.data.certNum
					}
				})
			}
		},
		fetchFormConfigs(businessId) {
			this.loading = true
			// 表单配置
			return queryGfbField({ businessId })
				.then((res) => {
					this.title = res.data[0].title
					res.data[0].title = ''
					this.formConfigs = res.data
				})
				.finally(() => {
					this.loading = false
				})
		},
		validate() {
			return this.$refs.form.validate()
		}
	},
	components: { XhForm }
}
</script>

<style lang="scss" scoped="scoped"></style>
